<template>
    <view class="login">
        <image class="login-bg" src="https://daiyue.gzzhenyi.net/static/image/login/bg.png" mode="heightFix" />
        <view class="login-header">
            <van-icon name="arrow-left" color="#333333" @tap="toBar" />
            <view class="login-header-title">验证手机号</view>
        </view>
        <view class="container">
            <view class="sub-title">
                <text>请输入验证码</text>
            </view>
            <view class="yy">
                <view class="desc">已发送至 <span class="phone-number">{{ formattedPhoneNumber(phoneNumber) }}</span></view>
                <view class="outer">
                    <input class="cinput" adjust-position="false" auto-blur="true" @blur="blur" @input="codenum"
                        :focus="focus" value="code" v-model="code" type="number" maxlength="4" />
                    <view class="code-input">
                        <view v-for="(item, index) in 4" :key="index" @click="codefocus(index)"
                            :style='(index == code.length ? "border: 2rpx solid #1195db;width: 115rpx;height: 115rpx;line-height: 115rpx;" : "color: " + codeclolor + ";" + "border: 1rpx solid" + codeclolor)'>
                            {{ code[index] && code[index] || '' }}
                        </view>
                    </view>
                </view>
                <view class="code-text" v-if="countdown > 0">重新发送（{{ countdown }}S）</view>
                <view class="code-text" v-else style="color:#359BEF ;" @click="handleResend">重新发送</view>
            </view>
        </view>
    </view>
</template>

<script>


export default {
    data() {
        return {
            phoneNumber: '12345678910',
            // 验证码输入聚焦
            focus: true,//input焦点，用于键盘隐藏后重新唤起
            // 验证码框颜色
            codeclolor: "#A2A2A2",//自定义光标的颜色
            // 验证码获取秒数
            sec: '20',//这是重新获取验证码的倒计时(可根据需求修改)
            code: '',//这是用户输入的验证码
            codeCorrect: '',//正确的验证码
            verifyShow: false,//是否禁用按钮
            countdown: 0,
            isDisabled: false
        };
    },
    onLoad(options) {
        this.phoneNumber = options.phone;
        this.handleResend();
    },
    methods: {
        toBar() {
            uni.navigateBack();
        },
        formattedPhoneNumber(phoneNumber) {
            return phoneNumber.replace(/(\d{4})(?=\d)/g, '$1 ');
        },
        handleResend() {
            if (this.countdown > 0) return;

            // 开始倒计时
            this.countdown = 60;
            this.isDisabled = true;

            const timer = setInterval(() => {
                this.countdown--;
                if (this.countdown === 0) {
                    clearInterval(timer);
                    this.isDisabled = false;
                }
            }, 1000);
        },
        codenum: function (event) {
            // console.log('输入的值',event.target.value)
            var that = this
            var code = event.target.value
            that.code = code
            if (code.length == 4) {
                if (code == that.codeCorrect) {
                    //输入六位验证码后自动进行验证并执行验证成功的函数
                    console.log('验证码正确：', that.code)
                } else {
                    console.log('验证码错误!!!：', that.code)
                    that.codeclolor = "#ff0000"
                    setTimeout(function () {
                        that.code = []
                        event.target.value = ""
                        that.codeclolor = "#A2A2A2"
                    }, 1500)
                }
            }
        },
        // 键盘隐藏后设置失去焦点
        blur: function () {
            var that = this
            that.focus = false
        },
        // 点击自定义光标显示键盘
        codefocus: function (e) {
            var that = this
            if (e == that.code.length) {
                that.focus = true
            }
        },



    }
}
</script>

<style lang="scss" scoped>
.login {
    .login-bg {
        width: 100%;
        height: 1624upx;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }

    .login-header {
        position: absolute;
        top: 105upx;
        left: 48%;
        transform: translateX(-50%);
        display: flex;
        width: 90%;

        .login-header-title {
            font-size: 30upx;
            color: #333333;
            display: flex;
            justify-content: center;
            margin: 0 auto;
        }
    }
}

.container {
    position: absolute;
    top: 33%;
    transform: translateY(-50%);
    width: 100%;
}

.cinput {
    position: fixed;
    left: -100rpx;
    width: 50rpx;
    height: 50rpx;
}

.recode {
    margin-top: 20rpx;
    width: 200rpx;
    height: 80rpx;
    line-height: 80rpx;
    color: #707070;
    font-size: 28rpx;
}

.code-input {
    margin: auto;
    // width: 850rpx;
    // height: 100rpx;
    display: flex;
    justify-content: center;

}

.code-input>view {
    margin-top: 5rpx;
    margin-left: 15rpx;
    width: 115upx;
    height: 115upx;
    line-height: 115upx;
    font-size: 53upx;
    color: #333333;
    text-align: center;
    border-radius: 10rpx;
    background-color: #fff;
    border: 1px solid #A2A2A2;

}

.code-input>view:nth-child(1) {
    margin-left: 0rpx;
}

.yy {
    text-align: center;

    .phone-number {
        margin-left: 15upx;
        position: relative;
    }

    .code-text {
        color: #333333;
        font-size: 32upx;
        padding: 30upx;
        width: 520upx;
        text-align: left;
        margin: 0 auto;
    }

    .desc {
        padding-top: 40rpx;
        color: #333333;
        font-size: 32upx;
        margin-bottom: 30upx;
    }

    .wrap {
        display: flex;
        align-items: center;
        margin-top: 50rpx;
        position: relative;

        .item {
            width: 115upx;
            height: 115upx;
            line-height: 115upx;
            background-color: #fff;
            border: 1px solid #A2A2A2;
            border-radius: 10upx;
            font-size: 53upx;
            color: #333333;
            margin: 0 auto;
        }

        .inner {
            padding: 0px 5px;
            box-sizing: border-box;
        }

        .code-input {
            position: absolute;
            top: 0;
            width: 115upx;
            height: 115upx;
            line-height: 115upx;
            background-color: transparent;
            border: none;
            border-radius: 10upx;
            box-sizing: border-box;
            z-index: 3;
            text-align: center;
        }
    }
}

.sub-title {
    font-size: 48upx;
    color: #333333;
    text-align: center;
}

.outer {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>